<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>宠物寄养</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    body{
      background-image:url("assets/images/jybg.jpg");
    }
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }

    .el-table .success {
      background: #e3f1f6;
    }
    .title_p{
      text-align: center;
      font: 60px Montserrat;
    }
    .title_p b{
      color: #c69a39;
    }
  </style>
</head>
<body>
<div id="app">
  <div>
    <p class="title_p">宠物 <b>寄养</b></p>
  </div>
  <div>
    <el-row>
      <el-col span="16">
        <el-carousel indicator-position="outside" autoplay="true" height="500px" style="width: 800px;">
          <el-carousel-item v-for="item in bannerArr">
            <img :src="item">
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col span="8">
        <p><b style="font-size: 25px; font-family: 'Kaiti SC';color: #856404">寄养费用</b></p>
        <el-card style="font-family: STFangsong">
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    border="true"
                    :row-class-name="tableRowClassName">
              <el-table-column
                      prop="house"
                      label="房型"
                      width="150">
              </el-table-column>
              <el-table-column
                      prop="type"
                      label="宠物类型"
                      width="150">
              </el-table-column>
              <el-table-column
                      prop="price"
                      label="价格">
              </el-table-column>
            </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <div>
    <el-row gutter="30">
      <el-col span="12" style="font-size: 16px;font-family: STFangsong ">
        <p style="font-size: 18px;color: #856404"><b>提供的服务</b></p>
        <p>每日健康检查，可应要求提供医疗服务</p>
        <hr>
        <br>
        <p style="font-size: 18px;color: #856404"><b>猫咪寄养</b></p>
        <p>我们的医疗团队为寄宿的猫提供彻底的护理，由医疗专业人员每天进行两次健康检查，
          根据压力水平和健康状况进行隔离。可应要求提供药物管理和其他额外护理程序</p>
        <hr>
        <p style="font-size: 18px;color: #856404" ><b>寄养需知</b></p>
        <p>入住时间：营业日下午1-5点。退房时间：营业日上午8-11点。<br>
          主人需自带猫粮和猫砂以防止突然换粮和换猫砂引起的肠胃不适及焦虑。<br>
          所有在尊宠动物医院寄养的猫咪们都需要有效期之内的疫苗证明及体外驱虫药。<br>
          所有第一次寄养的猫咪们都需要是本院注册及做过身体健康检查的客人。<br>
          预约时需要支付3天不可退款的定金。(注意：每次至少需要入住3晚)
        </p>
        <hr>
      </el-col>
      <el-col span="12">
        <div>
          <p style="font-size: 20px;font-family: SimSong;color: #856404"><b>寄养登记</b></p>
          <el-form ref="form" :model="form" label-width="80px" >
            <el-form-item label="房型选择">
              <el-select v-model="form.house" placeholder="请选择房型">
                <el-option label="单间" value="shanghai"></el-option>
                <el-option label="独栋" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="宠物种类">
              <el-radio-group v-model="form.type">
                <el-radio label="猫猫"></el-radio>
                <el-radio label="狗狗"></el-radio>
                <el-radio label="其他"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="寄养时间">
              <el-col :span="12">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col :span="12">
                <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="顾客备注" >
              <el-input type="textarea" v-model="form.desc" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item style="padding-left: 400px">
              <el-button type="primary" @click="onSubmit">立即预约</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        bannerArr: [
                'assets/images/b1.png',
                'assets/images/b2.png',
        ],
        tableData: [{
          house: '',
          type: '',
          price: ''
        }, {
          house: '单间',
          type: '猫猫',
          price: '每晚¥35'
        }, {
          house: '单间',
          type: '狗狗',
          price: '每晚¥40'
        }, {
          house: '',
          type: '',
          price: ''
        }, {
            house: '独栋',
            type: '猫猫',
            price: '每晚¥50'
          }, {
          house: '独栋',
          type: '狗狗',
          price: '每晚¥55'
        },{
          house: '',
          type: '',
          price: ''
        },{
          house: '其他房型',
          type: '其他宠物',
          price: '到店咨询'
        }, {
          house: '...',
          type: '...',
          price: '...'
        }],
        form: {
          house: '',
          type: '',
          date1: '',
          date2: '',
          desc: ''
        }
      }
    },
   methods:{
     tableRowClassName({row, rowIndex}) {
       if (rowIndex === 0) {
         return 'warning-row';
       } else if (rowIndex === 3) {
         return 'success-row';
       }else if (rowIndex === 6){
         return 'success'
       }
       return '';
     },
     onSubmit() {
       console.log('submit!');
       alert("提交成功");
     }
   }
  })
</script>
</html>